<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!--为了不让table表格样式覆盖-->
    <style>

        .layui-table-cell {
            height: 110px;
            white-space: normal;
        }

        .layui-table-body {
            overflow: visible;
        }

        .layui-table-box {
            overflow: visible;
        }

        /* 设置下拉框的高度与表格单元相同 */
        td .layui-form-select {
            margin-top: -10px;
            margin-left: -15px;
            margin-right: -15px;
        }
    </style>
</head>

<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">演示</a>
                <a>
                    <cite>导航元素</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <div class="layui-collapse" lay-filter="shaixuan">
                        <div class="layui-colla-item">
                            <h2 class="layui-colla-title">条件筛选<i class="layui-icon layui-colla-icon"></i></h2>
                            <div class="layui-colla-content">
                                <form class="layui-form">
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">价格范围</label>
                                            <div class="layui-input-inline" style="width: 100px;">
                                                <input type="text" name="minPrice" placeholder="￥" autocomplete="off"
                                                       class="layui-input">
                                            </div>
                                            <div class="layui-form-mid">-</div>
                                            <div class="layui-input-inline" style="width: 100px;">
                                                <input type="text" name="maxPrice" placeholder="￥" autocomplete="off"
                                                       class="layui-input">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">类型</label>
                                            <div class="layui-input-inline">
                                                <select name="type" lay-search="">
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">商品排序</label>
                                        <div class="layui-input-block">
                                            <input type="radio" value="0" name="up" title="无">
                                            <input type="radio" name="up" value="1" title="价格排序" checked="">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">商品名称</label>
                                        <div class="layui-input-block">
                                            <input style="width: 40.5848%;" placeholder="商品名称" type="text"
                                                   class="layui-input" name="name">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button class="layui-btn" lay-submit="" lay-filter="search">查询</button>
                                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="layui-card-header">

                    <button class="layui-btn" onclick="xadmin.open('添加商品','./goods-add.html',800,600)">
                        <i class="layui-icon"></i>添加
                    </button>
                </div>
                <div class="layui-card-body ">
                    <table id="goodslist" class="layui-table" lay-filter="test"></table>
                </div>
            </div>

        </div>
    </div>
</div>
</div>
<!--模板  -->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-danger" lay-event="alldown">
            批量下架
        </button>
        <button class="layui-btn layui-btn-danger" lay-event="allup">
            批量上架
        </button>
    </div>
</script>
<!--右侧工具-->
<script type="text/html" id="model-info">
    <button onclick="xadmin.open('详情','/lengmou/goods/info?goodsid={{d.id}}',1000,600)" type="button"
            class="layui-btn">
        <i class="iconfont">&#xe699;</i> 详情
    </button>
    <button type="button" class="layui-btn" name="upload" goodsid="{{d.id}}">
        <i class="layui-icon">&#xe67c;</i>上传图片
    </button>
</script>

<script type="text/html" id="model-state">
    <input type="checkbox" goodsstate="{{d.state}}" goodsid="{{d.id}}" goodsname="{{d.name}}" value="{{d.state}}"
           lay-skin="switch" lay-text="上架|下架" lay-filter="goods-state" {{ d.state==0 ? 'checked': ''}} >
</script>
<script type="text/html" id="model-type">
    <select data-value="{{d.type}}" goodstype="{{d.type}}" goodsid="{{d.id}}" lay-filter="goods-type" name="type">

    </select>
</script>
<script id="model-img" type="text/html">
    <img style="height: 110px" src="/lengmou/{{d.img}}"/>
</script>
<script>
    layui.use(['table', 'upload'], function () {
        //动态下拉框
        var options = "";
        $.post(
            "/lengmou/goodstype/getAll",
            function (data) {
                var types = data.types;
                for (var index in types) {
                    options += '<option value = "' + types[index].id + '">' + types[index].name + '</option>\n';
                }
            }, "json"
        );
        var table = layui.table;
        var upload = layui.upload;
        //商品表
        table.render({
            elem: '#goodslist'
            , toolbar: '#toolbarDemo'
            , url: '/lengmou/goods/allGoods' //数据接口
            , method: 'post'
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'id', type: 'checkbox',fixed: 'left',},
                {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left', style: 'height:110px'}
                , {field: 'img', title: '商品图片', templet: '#model-img', style: 'height:110px'}
                , {field: 'name', title: '商品名称', edit: 'text', width: 100}
                , {field: 'price', title: '价格', edit: 'text'}
                , {field: 'state', title: '状态', templet: '#model-state'}
                , {field: 'type', title: '类型', templet: '#model-type'}
                , {title: '商品操作', templet: '#model-info'}

            ]]
            , request: {pageName: 'pageNum', limitName: 'pageSize'}
            , done: function (res, curr, count) {
                $("select[name='type']").html(options);
                layui.each($("select[name='type']"), function (index, item) {
                    var elem = $(item);
                    console.log(elem.html());
                    elem.val(elem.data('value'));

                    // elem.find("option[value='xxx']").attr("selected",true);
                });
                $(".layui-unselect").parent().css('overflow', 'visible');
                layui.form.render();

                //初始化所有上传按钮
                $("button[name='upload']").each(function () {
                    upload.render({
                        elem: this //绑定元素
                        , url: '/lengmou/goods/upload' //上传接口
                        , data: {goodsid: $(this).attr('goodsid')}
                        , accept: 'images'
                        , acceptMime: 'image/*'
                        , done: function (res) {
                            if (res.state == 1) {
                                layer.alert("修改图片成功", function () {
                                    location.reload();
                                });
                            } else {
                                layer.alert("修改图片失败", function () {
                                    location.reload();
                                });
                            }
                        }
                        , error: function () {
                            layer.alert("请求错误了，抱歉了", function () {
                                location.reload();
                            });
                        }
                    });
                });
            }
        });

        table.on('edit(test)', function (obj) {
            var value = obj.value, //得到修改后的值
                data = obj.data //得到所在行所有键值
                ,
                field = obj.field; //得到字段
            layer.confirm('您确定修改商品：' + data.name + '吗？', {icon: 3, title: '提示'}, function (index) {
                    $.post(
                        "/lengmou/goods/updata",
                        {
                            id: data.id,
                            name: data.name,
                            price: data.price
                        }, function (data) {
                            if (data.state > 0) {
                                layer.msg("修改成功");
                            } else if (data.state == -1) {
                                layer.msg("修改失败，该商品不存在");
                            } else if (data.state == -2){
                                layer.msg("修改失败,价格必须大于0");
                            }
                        }, "json"
                    );
                }
            );
        });
        table.on('toolbar(test)',
            function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'alldown':
                        var data = checkStatus.data;
                        var test = JSON.stringify(data);
                        layer.confirm('您确定要下架您选中的这' + data.length + '个商品吗？', {
                            icon: 3,
                            title: '提示'
                        }, function (index) {
                            $.ajax(
                                {
                                    type: 'POST',
                                    url: '/lengmou/cars/SttingState1',
                                    contentType: "application/json; charset=utf-8",
                                    data: test,
                                    dataType: 'json',
                                    success: function (data) {
                                        if (data.state > 0) {
                                            layer.alert("操作成功", function () {
                                                location.reload();
                                            });
                                        } else if (data.state == -1) {
                                            layer.alert("操作失败，参数错误");
                                        }
                                    }
                                }
                            );
                            layer.close(index);

                        }, function (index) {
                            layer.close(index);
                        });

                        break;


                    case "allup":
                        var data = checkStatus.data;
                        var test = JSON.stringify(data);
                        layer.confirm('您确定要上架您选中的这' + data.length + '个商品吗？', {
                            icon: 3,
                            title: '提示'
                        }, function (index) {
                            $.ajax(
                                {
                                    type: 'POST',
                                    url: '/lengmou/goods/SttingState0',
                                    contentType: "application/json; charset=utf-8",
                                    data: test,
                                    dataType: 'json',
                                    success: function (data) {
                                        if (data.state > 0) {
                                            layer.alert("操作成功", function () {
                                                location.reload();
                                            });
                                        } else if (data.state == -1) {
                                            layer.alert("操作失败，参数错误");
                                        }
                                    }
                                }
                            );
                            layer.close(index);

                        }, function (index) {
                            layer.close(index);
                        });
                        break;
                }
            }
        );


    });
</script>
</body>

<script>layui.use(['laydate', 'form'],
    function () {
        var laydate = layui.laydate;
        var form = layui.form;

        form.on('switch(goods-state)', function (data) {
            var checked = data.elem.checked;
            var id = data.elem.attributes['goodsid'].nodeValue;
            var state = data.elem.attributes['goodsstate'].nodeValue;
            var goodsname = data.elem.attributes['goodsname'].nodeValue;
            if (!data.elem.checked && data.value == 0) {
                layer.confirm('您确定要下架商品：' + goodsname + '吗？', {icon: 3, title: '提示'}, function (index) {
                    $.post(
                        "/lengmou/goods/setGoodsState",
                        {
                            id: id
                            , state: 1
                        },
                        function (data) {
                            if (data.state == 1) {
                                layer.msg("修改成功");
                                location.reload();
                            } else if (data.state == -1) {
                                layer.msg("该商品不存在，或已被删除");
                                location.reload();
                            } else {
                                layer.msg("抱歉，服务器故障");
                            }
                        }, "json"
                    );
                }, function (index, obj) {
                    layer.msg("选择取消");
                    data.elem.checked = !checked;
                    form.render();
                });
            } else if (data.elem.checked) {
                layer.confirm('您确定要上架该商品：' + goodsname + '吗？', {icon: 3, title: '提示'}, function (index) {
                    $.post(
                        "/lengmou/goods/setGoodsState",
                        {
                            id: id
                            , state: 0
                        },
                        function (data) {
                            if (data.state == 1) {
                                layer.msg("修改成功");
                                location.reload();
                            } else if (data.state == -1) {
                                layer.msg("该商品不存在，或已被删除");
                                location.reload();
                            } else {
                                layer.msg("抱歉，服务器故障");
                            }
                        }, "json"
                    );
                }, function (index, obj) {
                    layer.msg("选择取消");
                    data.elem.checked = !checked;
                    form.render();
                });
            }
        });

        form.on('submit(search)', function (data) {
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            var table = layui.table;
            table.reload('goodslist', {
                url: '/lengmou/goods/allGoods',
                method: 'post',
                where: { //设定异步数据接口的额外参数，任意设
                    name: data.field.name,
                    minPrice: data.field.minPrice,
                    maxPrice: data.field.maxPrice,
                    type: data.field.type,
                    up: data.field.up
                }
                , page: true
                , id: 'goodslist'
            });
            //只重载数据
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        form.on('select(goods-type)', function (data) {
            var goodsid = data.elem.attributes['goodsid'].nodeValue;
            var goodstype = data.elem.attributes['goodstype'].nodeValue;
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象
            if (goodstype != data.value) {
                layer.confirm("您确定要修改该商品的类型吗？", {icon: 3, title: '提示'}, function (index) {
                    $.post(
                        "/lengmou/goods/setGoodsType",
                        {
                            id: goodsid,
                            type: data.value
                        }, function (data) {
                            if (data.state > 0) {
                                layer.msg("修改成功");
                            } else {
                                layer.msg("修改失败")
                            }
                        }, "json"
                    );
                }, function (index) {
                    location.reload();
                });
            }
        });
    });


/*用户-停用*/
function member_stop(obj, id) {
    layer.confirm('确认要停用吗？',
        function (index) {

            if ($(obj).attr('title') == '启用') {

                //发异步把用户状态进行更改
                $(obj).attr('title', '停用');
                $(obj).find('i').html('&#xe62f;');

                $(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('已停用');
                layer.msg('已停用!', {
                    icon: 5,
                    time: 1000
                });

            } else {
                $(obj).attr('title', '启用');
                $(obj).find('i').html('&#xe601;');

                $(obj).parents("tr").find(".td-status").find('span').removeClass('layui-btn-disabled').html('已启用');
                layer.msg('已启用!', {
                    icon: 5,
                    time: 1000
                });
            }

        });
}

/*用户-删除*/
function member_del(obj, id) {
    layer.confirm('确认要删除吗？',
        function (index) {
            //发异步删除数据
            $(obj).parents("tr").remove();
            layer.msg('已删除!', {
                icon: 1,
                time: 1000
            });
        });
}

function delAll(argument) {

    var data = tableCheck.getData();

    layer.confirm('确认要删除吗？' + data,
        function (index) {
            //捉到所有被选中的，发异步进行删除
            layer.msg('删除成功', {
                icon: 1
            });
            $(".layui-form-checked").not('.header').parents('tr').remove();
        });
}</script>

</html>